<template>
  <div>
    <input type="checkbox" :checked="item.status === FINISHED" @click="setStatus(item.id)" />
    <span :style="item.status === FINISHED ? 'text-decoration: line-through': ''">
      {{ item.content }}
    </span>
    <button @click="removeTodo(item.id)">删除</button>
    <button v-if="item.status !== FINISHED" @click="setDoing(item.id)" :class="item.status === DOING ? 'doing' : 'willdo'">
      {{ item.status === DOING ? '正在做' : '马上做' }}
    </button>
  </div>
</template>

<script lang='ts'>
import { ITodo, TODO_STATUS } from '@/typings'
import { defineComponent, PropType } from '@vue/runtime-core'

interface IStatusState {
  DOING: TODO_STATUS
  FINISHED: TODO_STATUS
  WILLDO: TODO_STATUS
}

export default defineComponent({
  name: 'TodoItem',
  props: {
    item: Object as PropType<ITodo>
  },
  setup(props, { emit }) {
    const statusState: IStatusState = {
      DOING: TODO_STATUS.DOING,
      FINISHED: TODO_STATUS.FINISHED,
      WILLDO: TODO_STATUS.WILLDO
    }

    const removeTodo = (id: number) => {
      emit('removeTodo', id)
    }

    const setStatus = (id: number) => {
      emit('setStatus', id)
    }

    const setDoing = (id: number) => {
      emit('setDoing', id)
    }

    return {
      ...statusState,
      removeTodo,
      setStatus,
      setDoing
    }
  }
})
</script>

<style scoped>
.doing {
  background-color: #cdcdcd;
  color: #000;
}
.willdo {
  background-color: orange;
  color: #000;
}
</style>